
<template>
  <div>
     <div class="icon" :class="{'active': value}" @click="selectItem">
      <img src="~/assets/img/cart/tick.svg" alt />
    </div>
  </div>
</template>

<script>
export default {
  name: 'checkButton',
  props: {
    value: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      checked: this.value
    }
  },
  methods: {
    selectItem() {
      this.$emit('checkBtnClick')
    }
  },
  watch: {
    // eslint-disable-next-line object-shorthand
    value: function(newValue) {
      console.log('111')
      this.checked = newValue
    }
  }
}
</script>

<style lang="stylus" scoped>
.icon
  position: relative
  margin: 0
  width: 18px
  height: 18px
  border-radius: 50%
  border: 2px solid #ccc
  cursor: pointer
.active
  background-color: #ff8198
  border-color: #ff8198
</style>